<template>
	<view>
		<view :class="'tabbar_box ' + (isIphoneX ? 'iphoneX-height' : '')" style="border-radius: 20px;">
			<block v-for="(item, index) in tabbar.list" :key="item.pagePath">
				<view v-if="item.isSpecial == true && item.selected == false" class="tabbar_nav" hover-class="none"
					@tap="openShow" :style="'color:' + item.selected ? 'red' : 'blue'">
					<view class="icon-box">
						<image class="tabbar_icon" :src="item.iconPath"></image>
					</view>
					<text style="color: #979795">{{ item.text }}</text>
				</view>

				<view v-else class="tabbar_nav" hover-class="none" @tap="openPage($event,item)" :data-item="item"
					:style="{color:item.selected ? '#6326FF' : '#C5B9A9',
					background:item.selected ? '#E4FF34' : '#6326FF'}">
					<view class="icon-box">
						<image class="tabbar_icon"
							:src="item.selected ? (floorstatus ? item.toTapIcon : item.selectedIconPath) : item.iconPath">
						</image>
						<text v-if="index == 4 && is_show"></text>
					</view>
					<text
						:style="'color:' + (floorstatus && item.selected && '#FF2840')">{{ floorstatus && item.selected ? '回顶部' : item.text }}</text>
					<!-- <view class="notice" v-if="item.isNotice"></view> -->
					<view class="notice" v-if="notice_num > 0 && index == 3">
						{{notice_num}}
					</view>
				</view>
			</block>
		</view>
		<view class="bgcview" v-if="show" catch:touchmove>
			<view class="bgc" @tap="closeShow"></view>
			<view class="wrapperBox">
				<view class="wrapper">
					<navigator @tap="closeShow" data-env="ljxd" url="/pages/order/order?changeIndex=1"
						class="wrapper-item" data-xdlx_0="靓机下单">
						<image src="/static/image/index/goosGet.png" class="iconImage"></image>
						<view class="wrapper-item-textBox">
							<view class="wrapper-title">靓机下单</view>
							<view class="wrapper-text">多卖35%</view>
						</view>
					</navigator>
					<navigator @tap="closeShow" data-env="ksxd" url="/pages/order/order?changeIndex=0"
						class="wrapper-item" data-xdlx_0="快速下单">
						<image src="/static/image/index/qulickOrder.png" class="iconImage"></image>
						<view class="wrapper-item-textBox">
							<view class="wrapper-title">快速下单</view>
							<view class="wrapper-text">免估价 更便捷</view>
						</view>
					</navigator>
					<navigator @tap="closeShow" data-env="jzxd" url="/pages/classify/classify" class="wrapper-item"
						data-xdlx_0="环保下单">
						<image src="/static/image/index/goodsAdd.png" class="iconImage"></image>
						<view class="wrapper-item-textBox">
							<view class="wrapper-title">环保下单</view>
							<view class="wrapper-text">环保机回收</view>
						</view>
					</navigator>
				</view>
				<image src="/static/image/index/close.png" class="closeImage" @tap="closeShow"></image>
			</view>
		</view>
	</view>
</template>

<script>
	// tabBarComponent/tabBar.js
	const app = getApp();

	const $index = require('../request/api/v1/index');

	export default {
		data() {
			return {
				isIphoneX: app.globalData.isIphoneX,
				is_show: false,
				show: false,
				notice_num: '',
				tabbar: {
					backgroundColor: '#FFF5E1', //#A52228
					color: '#D1C5B5',
					selectedColor: '#fff',
					list: [{
							pagePath: '/pages/index/index',
							iconPath: '/static/tabbarComponent/icon/icon-home.png',
							selectedIconPath: '/static/tabbarComponent/icon/icon-homeSe.png',
							toTapIcon: '/static/tabbarComponent/icon/top_icon.svg',
							text: '首页'
						},
						// {
						// 	pagePath: '/pages/order/order',
						// 	iconPath: '/static/tabbarComponent/icon/icon-orderbar.png',
						// 	text: '去下单',
						// 	isSpecial: true
						// },
						// {
						// 	pagePath: '/pages/returnCar/returnCar',
						// 	iconPath: '/static/tabbarComponent/icon/car.png',
						// 	selectedIconPath: '/static/tabbarComponent/icon/icon-car.png',
						// 	text: '回收车'
						// },
						{
							pagePath: '/pages/mine/mine',
							iconPath: '/static/tabbarComponent/icon/icon-mine.png',
							selectedIconPath: '/static/tabbarComponent/icon/icon-mineSe.png',
							text: '我的',
							isNotice: true
						}
					]
				}
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			type: {
				type: String
			},
			floorstatus: {
				type: Boolean,
				default: false
			},
			// notice_num: {
			// 	type: Number,
			// 	default: 0
			// },
		},
		// watch: {
		// 	notice_num: {
		// 		handler: function(val) {
		// 			console.log('测试这里哦');
		// 			this.onShowd();
		// 		},
		// 		immediate: true,
		// 		deep: true
		// 	}
		// },
		created() {},
		mounted() {
			this.onShowd();
			if (this.type == '0') {
				this.editTabbar(0);
			}
		},
		methods: {
			// 弹框
			openShow() {
				// var show = false;
				// this.show = true;
				uni.navigateTo({
					url: '/pages/order/order',
				})
			},
			editTabbar(notice_num) {
				this.notice_num = notice_num;
				var tabbar = this.tabbar;
				for (var i in tabbar.list) {
					tabbar.list[i].selected = false;
					if (tabbar.list[i].pagePath == '/pages/mine/mine') {
						if (notice_num > 0) {
							tabbar.list[i].isNotice = true;
						} else {
							tabbar.list[i].isNotice = false;
						}
					}
					if (i == this.type) {
						tabbar.list[i].selected = true;
					}
				}
				this.tabbar = tabbar;
			},
			onShowd() {
				// $index.noticeInfo().then(res => {
				// 	this.$emit('tabEvent', res)
				// 	if (res.feedback_num > 0) {
				// 		app.globalData.is_show = true;
				// 	} else {
				// 		app.globalData.is_show = false;
				// 	}
				// 	this.notice_num = res.info_num;
				// 	this.is_show = app.globalData.is_show;
				// });
			},
			openPage(event, item) {
				//
				console.log('event', event);
				// this.onShowd()
				var page = event.currentTarget.dataset.item.pagePath;

				if (this.floorstatus && page == '/pages/index/index') {
					this.$emit('HandlerTop');
				} else {
					setTimeout(() => {
						uni.switchTab({
							url: page + '?from=tabbar'
						});
					}, 100);
				}
			},

			openOtherWx() {
				//以下注释为跳转到宝回收
				// wx.reportEvent("click_lj", {
				// })
				// wx.navigateToMiniProgram({
				//   appId: 'wx149b65c3c14570a8',
				//   path: 'pages/quotation/quotation',
				//   envVersion: 'release',
				//   extarData: {
				//     open: 'auth'
				//   },
				//   success(res) {}
				// })
			},

			closeShow(e) {
				// var env = e.currentTarget.dataset.env;
				// let xdlx_0 = e.currentTarget.dataset.xdlx_0;
				// console.log(xdlx_0);

				// if (env == 'ksxd') {
				// 	uni.reportEvent('click_ksxd', {});
				// }

				// if (env == 'jzxd') {
				// 	uni.reportEvent('click_jzxd', {});
				// }

				// if (env == 'ljxd') {
				// 	uni.reportEvent('click_lj', {});
				// }
				this.show = false;
			}
		},
		noop() {}
	};
</script>
<style>
	@import './tabbar.css';
</style>